<!DOCTYPE html>
<html>

<head>
    <!-- 1. 行内块元素的间距问题 -->
    <!-- 两个item之间有间距，item下方也有间距 -->
    <meta charset="utf-8">
    <title>1. 行内块元素的间距问题</title>
    <style>
        .box {
            border: 1px solid red;

        }

        .item{
            width: 200px;
            height: 200px;
            background-color: palegreen;
            display: inline-block;
        }


    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item">123</div>

    </div>

    <p>两个行内块元素默认是基线对齐，而行内块元素的基线是其底边</p>
    <p>但是如果当行内块元素内有内容是，其基线等于其内容的基线</p>
    <p>所以第二个行内块元素的基线就是数字123的下边缘，它会和第一个块的下边缘对齐
    </p>

</body>

</html>
